<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>项目圈主页</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
	</head>
	<body class="projectCircleIndexBox">
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>我的材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<div class="contentTitle">北京学清园小区</div>
				<button class="contentControl mr10">人员管理</button>
				<button class="contentControl mr10">设计预评价</button>
				<button class="contentControl mr10">材料采购</button>
				<button class="contentControl mr10">施工抽检</button>
				<button class="contentControl mr10">项目验收</button>
				<button class="contentControl">竣工报告</button>
				<div class="help">
					<a href="javascript:void(0)">
						<span class="iconfont">&#xe60c;</span>
						<span>使用帮助</span>						
					</a>
				</div>
				<div class="clear"></div>
			</div>
			
			<!--项目圈内容 start-->
			<div class="projectCircleIndex">
				
			<!--Vue模态框 start-->
				<el-dialog title="材料详情" v-model="dialogTableVisible">
				  	<div class="modalContentBox">
				  		<div class="modalContent">
				  			<div class="imgForm">
				  				<div class="imgBox">
				  					<img src="../img/sourceImg.jpg"/>
				  				</div>
				  				<div class="imgDec">
				  					<div class="decBox">
				  						<label>材料类别</label>
				  						<div class="dec">木地板/实木地板</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>品牌</label>
				  						<div class="dec">美宜佳</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>型号</label>
				  						<div class="dec">dt8999</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>材料类型</label>
				  						<div class="dec">干材料</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>规格</label>
				  						<div class="dec">-</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产商</label>
				  						<div class="dec">万科</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产日期</label>
				  						<div class="dec">2017-10-09</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>检测单位</label>
				  						<div class="dec">检验东莞实验室</div>
				  						<div class="clear"></div>
				  					</div>
				  				</div>
				  				<div class="clear"></div>
				  			</div>
				  			<div class="listForm">
				  				<ul class="wid100">
				  					<li class="listFormTitle">
				  						<div class="listSource">污染源</div>
				  						<div class="release">释放率(mg/m2.h)</div>
				  						<div class="releaseLevel">释放等级</div>
				  						<div class="clear"></div>
				  					</li>
				  					<li class="listFormDec" v-for="modalList in modalForm">
				  						<div class="listSource">{{modalList.source}}</div>
				  						<div class="release">{{modalList.rate}}</div>
				  						<div class="releaseLevel">{{modalList.level}}</div>
				  						<div class="clear"></div>
				  					</li>
				  				</ul>
				  			</div>
				  			<button class="greenBtn fr" @click="successful">取消收藏</button>
				  			<div class="clear"></div>
				  		</div>
				  	</div>
				</el-dialog>
				
				<!--Vue模态框 end-->
				
				
				<div class="projectBox">
					<div class="projectBoxTop">
						<span class="projectBoxName">项目周期</span>
						<span>2017-02-23 至 2017-03-29</span>
						
					</div>
					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum">1</div>
								<div class="stepName">启动</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine">
									<div class="popOverBox">
										对设计方案进行<a href="javascript:void(0);">预评估</a>
									</div>
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">2</div>
								<div class="stepName">方案选定</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine "></div>
								<div class="finishLine hidden">
									<div class="popOverBox">
										对设计方案进行<a href="javascript:void(0);">预评估</a>
									</div>
								</div>	
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">3</div>
								<div class="stepName">材料选定</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden">
									<div class="popOverBox">
										对设计方案进行<a href="javascript:void(0);">预评估</a>
									</div>
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">4</div>
								<div class="stepName">抽烟通过</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden">
									<div class="popOverBox">
										对设计方案进行<a href="javascript:void(0);">预评估</a>
									</div>
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">5</div>
								<div class="stepName">验收</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<div class="projectBox">
					<div class="projectBoxTop">
						<span class="projectBoxName">项目概况</span>
					</div>
					<div class="projectCondition">
						<div class="conditonList">
							<div class="strip">
								<div class="name">项目名称</div>
								<div class="dec">北京学清苑小区</div>
								<div class="clear"></div>
							</div>
							<div class="strip">
								<div class="name">项目地址</div>
								<div class="dec">广东省深圳市福田侨香路3200路</div>
								<div class="clear"></div>
							</div>
							<div class="strip">
								<div class="name">交付状态</div>
								<div class="dec">硬装交</div>
								<div class="clear"></div>
							</div>
							<div class="strip">
								<div class="name">建筑类型</div>
								<div class="dec">星级酒店</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="conditonList lastConditionList">
							<div class="strip">
								<div class="name">控制要求</div>
								<div class="dec">3级</div>
								<div class="clear"></div>
							</div>
							<div class="strip">
								<div class="name">建筑面积</div>
								<div class="dec">23，000平方米</div>
								<div class="clear"></div>
							</div>
							<div class="strip">
								<div class="name">标准依据</div>
								<div class="dec">绿色建筑室内装饰评价标准</div>
								<div class="clear"></div>
							</div>
							<div class="strip">
								<div class="name">建筑层高</div>
								<div class="dec">3.0m</div>
								<div class="clear"></div>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<div class="projectBox">
					<div class="projectBoxTop">
						<span class="projectBoxName">项目人员</span>
					</div>
					<div class="memberList">
						<ul>
							<li class="listDec">
								<div>角色</div>
								<div>姓名</div>
								<div>账号</div>
								<div>公司</div>
								<div class="clear"></div>
							</li>
							<ul>
								<li class="memberDec">
									<div>
										<span class="iconfont">&#xe60e;</span>
										<span>管理员</span>
									</div>
									<div>KDD</div>
									<div>139992334556</div>
									<div>万科科技有限公司</div>
								</li>
								<li class="memberDec">
									<div>
										<span class="iconfont">&#xe613;</span>
										<span>项目经理</span>
									</div>
									<div>DDK</div>
									<div>139992334556</div>
									<div>宝能科技有限公司</div>
								</li>
								<li class="memberDec">
									<div>
										<span class="iconfont">&#xe60d;</span>
										<span>设计师</span>
									</div>
									<div>KDD</div>
									<div>139992334556</div>
									<div>万科科技有限公司</div>
								</li>
							</ul>
						</ul>
					</div>
				</div>
				
				<div class="projectBox">
					<div class="projectBoxTop">
						<span class="projectBoxName">项目户型单</span>
					</div>
					<div class="imgTypes">
						<div class="imgType">
							<img src="../img/imgtype.jpg" class="wid100"/>
						</div>
						<div class="imgType">
							<img src="../img/imgtype.jpg" class="wid100"/>
						</div>
						<div class="clear"></div>
					</div>
				</div>
					
				<div class="projectBox">
					<div class="projectBoxTop">
						<span class="projectBoxName">材料控制清单</span>
					</div>
					<ul class="materialList">
						<li class="listDec">
							<div class="materialType">材料类型</div>
							<div class="materialArea">材料面积</div>
							<div class="materialImg">图片</div>
							<div class="controlRequest">
								<div class="cRFirstMenu">控制要求</div>
								<div class="cRSecondMenu">
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲醛</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">TOVC</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">二甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="clear"></div>
						</li>
						<li class="materialDec" v-for="controlList in controlForm">
							<div class="materialType">{{controlList.type}}</div>
							<div class="materialArea">{{controlList.Area}}</div>
							<div class="materialImg">
								<img v-bind:src="controlList.img"/>
							</div>
							<div class="controlRequest">
								<div class="materialContentList">
									<div class="wid20 fl tac">
										<p class="materialContent">{{controlList.jiaquan}}</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">{{controlList.TOVC}}</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">{{controlList.ben}}</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">{{controlList.jiaben}}</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">{{controlList.erjiaben}}</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="clear"></div>
						</li>
					</ul>
				</div>
			
				<div class="projectBox">
					<div class="projectBoxTop">
						<span class="projectBoxName">材料清单</span>
						<div class="fr showStyle">
							<span class="iconfont listShowStyle" :class="{'active':isSourceListShow}" @click="sourceListShow">&#xe790;</span>
							<span class="iconfont cardShowStyle" :class="{'active':isMaterialRoomListShow}" @click="materialRoomListShow">&#xe6e5;</span>
						</div>
						<div class="clear"></div>
					</div>
					<div class="sourceList" :class="{'hidden':isSourceListShow}">
						<div class="sourceType" v-for="imgList in imgForm" @click="dialogTableVisible = true">
							<div class="sourceImg">
								<img v-bind:src="imgList.img"/>
							</div>
							<div class="sourceDec">
								<div class="name">{{imgList.brand}} {{imgList.type}} | {{imgList.model}}</div>
								<div class="sourceContent">
									<div class="sourceContentDec">
										<p>甲醛</p>
										<p class="sourceNum">{{imgList.jiaquan}}</p>
									</div>
									<div class="sourceContentDec">
										<p>TOVC</p>
										<p class="sourceNum">{{imgList.TOVC}}</p>
									</div>
									<div class="sourceContentDec">
										<p>苯</p>
										<p class="sourceNum">{{imgList.ben}}</p>
									</div>
									<div class="sourceContentDec">
										<p>甲苯</p>
										<p class="sourceNum">{{imgList.jiaben}}</p>
									</div>
									<div class="sourceContentDec">
										<p>二甲苯</p>
										<p class="sourceNum">{{imgList.erjiaben}}</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
						</div>					
						<div class="clear"></div>
					</div>
					<div class="materialRoomList" :class="{'hidden':isMaterialRoomListShow}">
						<div class="listDec">
							<div class="brand">品牌</div>
							<div class="type">类型</div>
							<div class="img">图片</div>
							<div class="model">型号</div>
							<div class="chemistryContent">甲醛</div>
							<div class="chemistryContent">TVOC</div>
							<div class="chemistryContent">苯</div>
							<div class="chemistryContent">甲苯</div>
							<div class="chemistryContent">二甲苯</div>
							<div class="control">操作</div>
							<div class="clear"></div>
						</div>
						<div class="materialDec active" v-for='list in form'>
							<div class="brand">{{list.brand}}</div>
							<div class="type">{{list.type}}</div>
							<div class="img">
								<img v-bind:src="list.img"/>
							</div>
							<div class="model">{{list.model}}</div>
							<div class="chemistryContent">{{list.jiaquan}}</div>
							<div class="chemistryContent">{{list.TOVC}}</div>
							<div class="chemistryContent">{{list.ben}}</div>
							<div class="chemistryContent">{{list.jiaben}}</div>
							<div class="chemistryContent">{{list.erjiaben}}</div>
							<div class="control"><a href="javascript:void(0);" @click="dialogTableVisible = true">查看</a></div>
							<div class="clear"></div>
						</div>
						
					</div>
				</div>
			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			
			//popOverBox控制
			$('.stepLine .finishLine').each(function(index){
				$(this).hover(function(){
					$('.popOverBox').eq(index).show();
				},function(){
					$('.popOverBox').eq(index).hide();
				});
			});
		});
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		 
		var projectCircleIndex = new Vue({
			el:'.projectCircleIndex',
			data:function(){
				return{
					isSourceListShow:true,
					isMaterialRoomListShow:false,
					dialogTableVisible: false,
			        modalForm:[
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        ],
					controlForm:[
						{
							type:'强化木地板',
							Area:'16.5',
							img:'../img/materialImg.jpg',
							jiaquan:'0.3',
							TOVC:'0.3',
							ben:'0.3',
							jiaben:'0.3',
							erjiaben:'0.3'
						},
						{
							type:'强化木地板',
							Area:'16.5',
							img:'../img/materialImg.jpg',
							jiaquan:'0.3',
							TOVC:'0.3',
							ben:'0.3',
							jiaben:'0.3',
							erjiaben:'0.3'
						},
						{
							type:'强化木地板',
							Area:'16.5',
							img:'../img/materialImg.jpg',
							jiaquan:'0.3',
							TOVC:'0.3',
							ben:'0.3',
							jiaben:'0.3',
							erjiaben:'0.3'
						},
					],
					form:[
						{
							brand:'德尔',
							type:'强化木地板',
							img:'../img/materialImg.jpg',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
						{
							brand:'德尔',
							type:'强化木地板',
							img:'../img/materialImg.jpg',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
						{
							brand:'德尔',
							type:'强化木地板',
							img:'../img/materialImg.jpg',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
					],
					imgForm:[
						{
							img:'../img/sourceImg.jpg',
							brand:'德尔',
							type:'强化木地板',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
						{
							img:'../img/sourceImg.jpg',
							brand:'德尔',
							type:'强化木地板',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
						{
							img:'../img/sourceImg.jpg',
							brand:'德尔',
							type:'强化木地板',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
					]
				}
			},
			methods:{
				sourceListShow:function(){
					this.isSourceListShow = true;
					this.isMaterialRoomListShow = false;
				},
				materialRoomListShow:function(){
					this.isSourceListShow = false;
					this.isMaterialRoomListShow = true;
				},
				successful:function(){
			        this.$message({
			          	message: '取消收藏成功！',
			          	type: 'success'
			        });
			        this.dialogTableVisible = false;
			    },
			}
		});
	</script>
</html>
